import { SetupContext, computed,defineComponent,inject, onMounted, ref } from 'vue';
import { DesignerItemContext } from '../../../designer-canvas/src/types';
//import { useDesignerRules } from '../use-designer-rules';
import { useDesignerComponent } from '../../../designer-canvas/src/composition/function/use-designer-component';
import { easyTransferProps, EasyTransferProps } from '../easy-transfer.props';
import FListView from '../../../list-view/src/list-view.component';
import '../easy-transfer.css';
export default defineComponent({
    name: 'FEasyTransferDesign',
    props: easyTransferProps,
    emits: [
        'update:modelValue'
    ] as (string[] & ThisType<void>) | undefined,
    setup(props: EasyTransferProps, context: SetupContext) {
        const elementRef = ref();
        const identifyField = ref(props.identifyField);
        const designItemContext = inject<DesignerItemContext>('design-item-context') as DesignerItemContext;
        //const designerRulesComposition = useDesignerRules(designItemContext.schema, designItemContext.parent?.schema);
        const componentInstance = useDesignerComponent(elementRef, designItemContext);
        const fillToParent = ref(false);
        const displayType = ref(props.displayType);
        const selectionTitle = ref('已选：');
        const selectionItemTitle = ref('项数据');

        onMounted(() => {
            elementRef.value.componentInstance = componentInstance;
        });

        context.expose(componentInstance.value);

        const transferClass = computed(() => {
            const classObject = {
                'transfer': true,
                'row': true,
                'f-utils-fill': fillToParent.value
            } as Record<string, boolean>;
            return classObject;
        });

        const shouldShowOptionList = computed(() => true);
        const shouldShowOptionTree = computed(() => false);
        const dataSource = [{id:"datasource",value:[{id: 1, value: '选项1',title: '选项1'}, {id: 2, value: '选项2',title: '选项2'}, {id: 3, value: '选项3',title: '选项3'}]}];
        const selections = ref<any[]>(props.selections || []);
        const selectionValues = computed(() => selections.value.map((seletedItem: any) => seletedItem[identifyField.value]));
        const selectionMaps = new Map<string, any>();

        function onSelectionChange(seletedItems: any[]) {
            selections.value = seletedItems.map((item: any) => Object.assign({}, item));
            context.emit('change', selections.value);
        }


        function renderOptionList() {
            console.log("11111",dataSource.value)
            const data =  [{id: 1, value: '选项1',title: '选项1'}, {id: 2, value: '选项2',title: '选项2'}, {id: 3, value: '选项3',title: '选项3'}];
            return <FListView class="f-utils-fill" data={data} multi-select={true} draggable={false}
                              header="Search" headerClass="transfer-search-box"
                              selection-values={selectionValues.value} onSelectionChange={onSelectionChange}
            > </FListView>;
        }

        function renderOptionTree() {
            console.log("5555",dataSource.value)
            return <></>;
        }


        function renderOptionPane() {
            console.log("3333",dataSource.value)
            return <div class="f-utils-fill option-pane d-flex flex-column">
                <div class="f-utils-flex-column option-pane-content f-utils-fill">
                    <div class="container columns-box d-flex f-utils-fill">
                        {shouldShowOptionList.value && renderOptionList()}
                        {shouldShowOptionTree.value && renderOptionTree()}
                    </div>
                </div>
            </div>;
        }

        function onSelectionChanged(seletedItems: any[]) {
            const originalSelectionMap = new Map<string, any>();
            selections.value.reduce((selectionMap: Map<string, any>, item: any) => {
                selectionMap.set(item[identifyField.value], item);
                return selectionMap;
            }, originalSelectionMap);
            selections.value = seletedItems.map((item: any) => originalSelectionMap.get(item[identifyField.value]));
            context.emit('change', selections.value);
        }

        function onRemoveSelectionItem(removedItem: any) {
            const removedItemIdentify = removedItem[identifyField.value];
            if (removedItemIdentify !== null || removedItemIdentify !== undefined) {
                selections.value = selections.value.filter((seletedItem: any) => seletedItem[identifyField.value] !== removedItemIdentify);
                const selectedItemFromDataSource = selectionMaps.get(removedItemIdentify);
                if (selectedItemFromDataSource) {
                    selectedItemFromDataSource.checked = false;
                    selectionMaps.delete(removedItemIdentify);
                }
                context.emit('change', selections.value);
            }
        }


        function renderSelectionList() {
            console.log("2222",dataSource.value)
            return <FListView style="flex:1" data={selections.value} draggable={true} view="DraggableView" keep-order={true}
                              onChange={onSelectionChanged} onRemoveItem={onRemoveSelectionItem}> </FListView>;
        }

        function renderSelectionPane() {
            console.log("4444",dataSource.value)
            return <div class="f-utils-fill selection-pane d-flex flex-column">
                <div class="f-utils-flex-column selection-pane-content f-utils-fill">
                    <div class="selection-pane-title">
                        <span class="selection-title">{selectionTitle.value}</span>
                        <span class="selection-count">{selections.value && selections.value.length}</span>
                        <span class="selection-item-title">{selectionItemTitle.value}</span>
                    </div>
                    <div class="container columns-box f-utils-fill d-flex">
                        {renderSelectionList()}
                    </div>
                </div>
            </div>;
        }

        return () => {
            return (
                <div ref={elementRef} class="drag-container" dragref={`${designItemContext.schema.id}-container`} >
                    {renderOptionPane()}
                    {renderSelectionPane()}
                </div>
            );
        };
    }
});
